<!--
  文件下载
  使用方式:
    <base-file-download :file-list="fileList" :download-request="onDownload"></base-file-upload>
-->
<template>
  <div v-if="fileList && fileList.length > 0" class="file-list-container">
    <el-button icon="el-icon-download" size="small" @click="onDownload" :disabled="disabled">附件下载</el-button>
    <div class="file-list-item" v-for="(item, idx) in fileList" :key="idx">
      <i class="el-icon-document"></i> {{ item.fileName }}
    </div>
  </div>
</template>

<script>
import isFunction from 'lodash/isFunction';
// import { downloadFileById, downloadMultipleFileByIds } from '../../api/common-controller';

export default {
  name: 'file-download',
  props: {
    fileList: {
      type: Array,
      default: () => [],
    },
    // 自定义下载请求事件
    downloadRequest: null,
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    /**
     * 文件下载
     */
    onDownload() {
      if (this.downloadRequest && isFunction(this.downloadRequest)) {
        this.downloadRequest(this.fileList);
        return;
      }
      const ids = this.fileList.map(d => d.fileId);
      const isMulti = ids.length > 1;
      // if (isMulti) {
      //   downloadMultipleFileByIds(ids).then(() => {
      //     this.$message({ type: 'success', message: '文件下载成功!' });
      //   }).catch(() => {
      //     this.$message({ type: 'error', message: '文件下载失败!' });
      //   });
      // } else {
      //   downloadFileById(this.fileList[0].fileId, this.fileList[0].fileName).then(() => {
      //     this.$message({ type: 'success', message: '文件下载成功!' });
      //   }).catch(() => {
      //     this.$message({ type: 'error', message: '文件下载失败!' });
      //   });
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.file-list-container {
  width: 100%;
  padding: 12px 0;

  .file-list-item {
    padding: 4px 0;
    height: 32px;
    line-height: 32px;

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      padding-bottom: 0;
    }
  }
}
</style>
